<template>
  <div>
    <div class="uncon">
      <el-table
        ref="table"
        v-loading="loading"
        :data="receivableList"
        border
        @selection-change="handleSelectionChange"
        :summary-method="getSummaries"
        show-summary
        :header-cell-style="styleTitleFunc"
        @select="selectCheckbox"
        :span-method="arraySpanMethod"
        row-key="id"
        size="mini"
      >
        <!--<el-empty slot="empty" description="未查询到欠费记录"></el-empty>-->
        <el-table-column type="selection" width="55" :reserve-selection="true" align="center" />
        <!--<el-table-column label="房屋名称" align="left" prop="roomName" width="100">-->
          <!--<template slot-scope="scope">-->
             <!--<span v-if="scope.row.projectId=='ysxm'" >-->
               <!--{{scope.row.normNames}}-->
               <!--<span style="font-size: 16px;color: red;font-weight: 600;"><svg-icon icon-class="money1" />{{scope.row.advanceAmount}}</span>-->
             <!--</span>-->
             <!--<span v-else >{{scope.row.roomName}}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column label="客户名称" align="left" prop="ownerName">
          <template slot-scope="scope">
             <span v-if="scope.row.projectId=='ysxm'" >
               {{scope.row.normNames}}
               <span style="font-size: 16px;color: red;font-weight: 600;"><svg-icon icon-class="money1" />{{scope.row.advanceAmount}}</span>
             </span>
            <span v-else ><el-link type="primary" @click="customInfoDetail(scope.row)">{{ scope.row.ownerName }}</el-link></span>
          </template>
          <!--<template slot-scope="scope">-->
            <!--<el-link type="primary" @click="customInfoDetail(scope.row)">{{ scope.row.ownerName }}</el-link>-->
          <!--</template>-->
        </el-table-column>
        <el-table-column label="收费项目" align="left" prop="normNames" width="110" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.projectId=='03'">{{scope.row.chargeName}}</span>
            <span v-else>{{scope.row.normNames}}</span>
          </template>
        </el-table-column>
        <el-table-column label="交讫日期" align="left" prop="deliveryTime" width="100"/>
        <el-table-column label="缴费截至月" align="left" prop="paymentCycle" width="100">
          <template slot-scope="scope" v-if="scope.row.projectId=='01' || scope.row.projectId=='05'">
            <el-date-picker
              v-model="scope.row.paymentCycle"
              type="month"
              value-format="yyyy-MM-dd"
              placeholder="选择月"
              :clearable="false"
              prefix-icon="false"
              @change="(v)=>handlerPaymentMonth(v,scope)"
              :picker-options="{disabledDate:(time)=>{return disabledDate(time,scope.row)}}"
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="费用区间" align="left" prop="costRange" width="180">
          <template slot-scope="scope">
            <el-tooltip class="item" v-if="scope.row.beginTime" effect="dark" :content="`缴费周期[${scope.row.monthNum}]个月`" placement="top-start">
              <el-link type="primary" @click="handleCostDetails(scope.row)">{{scope.row.beginTime}}~{{scope.row.finishTime}}</el-link>
            </el-tooltip>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center" prop="prices" width="50"/>
        <el-table-column label="应收金额" align="center" prop="receivableMoney" >
          <template slot-scope="scope">
            <el-link type="primary" v-if="scope.row.projectId!='ysxm'" @click="handleCostDetails(scope.row)">{{scope.row.receivableMoney.toFixed(2)}}</el-link>
            <span v-else>{{scope.row.receivableMoney.toFixed(2)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="实收金额" align="center" prop="haveMoney" >
          <template slot-scope="scope">
            {{scope.row.haveMoney.toFixed(2)}}
          </template>
        </el-table-column>
        <!--<el-table-column label="未收金额" align="center" prop="amountOwed" />-->
        <el-table-column label="冲抵金额" align="center" prop="amountAmount">
          <template slot-scope="scope">
            {{scope.row.amountAmount.toFixed(2)}}
          </template>
        </el-table-column>
        <el-table-column label="优惠金额" align="center" prop="specialMoney" >
          <template slot-scope="scope">
            <el-input class="special_money_class" v-if="checkNormId(scope.row.normId) && checkSelectionRow(scope.row)&& showFavourableMoney" @change="(v)=>specialMoneyChange(v,scope.row)" v-model="scope.row.specialMoney"></el-input>
            <span v-else>{{scope.row.specialMoney.toFixed(2)}}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-form v-if="pageParam.roomIdArray.length > 0" class="bottomForm" :model="form" ref="form" size="mini" label-position="left" label-width="65px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="优惠政策" prop="preferentialId" >
              <el-select v-model="form.preferentialId" clearable filterable @clear="preferentialClear" @change="changePolicy" placeholder="请选择优惠政策">
                <el-option
                  v-for="item in listFavouredPolicyOptions"
                  :key="item.favouredPolicyId"
                  :label="item.favouredPolicyName"
                  :value="item.favouredPolicyId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="优惠折扣" prop="discount" >
              <el-input  v-model="form.discount" :disabled="showDiscount" placeholder="请选择优惠折扣"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="应收金额" prop="billMoney" >
              <el-input  v-model="form.billMoney" @change="billMoneyChange" readonly placeholder="请输入收到金额"/>
            </el-form-item>
          </el-col>
          <!--<el-col :span="6">-->
            <!--<el-form-item label="找零金额" prop="oddChangeMoney" >-->
              <!--<el-input  v-model="form.oddChangeMoney" :readonly="this.form.oddChangeMoney==0" @change="oddChangeMoneyChange" placeholder="请输入找零金额"/>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <!--<el-col :span="6">-->
            <!--<el-form-item label="转存金额" prop="transferAmount" >-->
              <!--<el-input  v-model="form.transferAmount" @change="transferAmountChange" placeholder="请输入转存金额"/>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <el-col :span="6">
            <el-form-item label="收款日期" prop="billDate" >
              <el-date-picker
                v-model="form.billDate"
                type="date"
                prefix-icon="node"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="打印模板" prop="printTemplate" >
              <el-select v-model="form.printTemplate" clearable placeholder="请选择打印模板">
                <el-option
                  v-for="item in printTempletOptions"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>
    <div class="submit-but">
      <span style="font-size: 14px;color: red;">本次合计实收</span>
      <span style="font-size: 16px;color: red;font-weight: 600;"><svg-icon icon-class="money1" />{{form.billMoney}}</span>
      <span style="font-size: 14px;">  (注：本次冲抵</span>
      <span style="font-size: 16px;color: red;font-weight: 600;"><svg-icon icon-class="money1" />{{form.amountAmount}}</span>
      <span style="font-size: 14px;">  不在实收内)</span>
      <!--<el-link type="primary" class="link-but" @click="handlerPrint">打印预览</el-link>-->
      <!--<el-link type="primary" class="link-but" @click="handlerPreservePrint">保存并打印</el-link>-->
      <!--<el-link type="primary" class="link-but">保存并打印发票</el-link>-->
    </div>
    <div class="favoured-main" v-if="listFavouredPolicyOptions.length > 0">
      <div class="favoured-title">房间适用优惠政策: </div>
      <div class="favoured-content" v-for="(item,index) in listFavouredPolicyOptions">
        <div>
          {{index+1}}、{{item.favouredPolicyName}}
          适用标准(
          <template v-for="(norm,index_1) in item.favouredNorms">
            {{norm.normNames}}
            {{index_1!=item.favouredNorms.length-1?',':'' }}
          </template>
          )
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="operate-but">
      <!--<el-popover-->
        <!--placement="left"-->
        <!--width="450"-->
        <!--trigger="click"-->
        <!--v-model="assOpen"-->
        <!--v-if="showAssBtn"-->
      <!--&gt;-->
        <!--<el-table-->
          <!--ref="glfjTable"-->
          <!--:data="notCurrentRoomList"-->
          <!--border-->
          <!--@selection-change="assSelectionChange"-->
        <!--&gt;-->
          <!--<el-table-column type="selection" width="55" align="center" />-->
          <!--<el-table-column width="80" property="roomName" label="房屋名称"></el-table-column>-->
          <!--<el-table-column property="address" label="房屋地址"></el-table-column>-->
        <!--</el-table>-->
        <!--<div style="text-align: right; margin: 0">-->
          <!--<el-button size="mini" type="text" @click="assOpen = false">取消</el-button>-->
          <!--<el-button type="primary" size="mini" @click="assConfirm">确定</el-button>-->
        <!--</div>-->
        <!--<el-button type="primary" slot="reference" plain size="mini" style="margin-right: 10px;" @click="handlerGlfj">关联房间</el-button>-->
      <!--</el-popover>-->
      <!--<el-button type="primary"  plain size="mini" @click="handlerPreferential">优惠设置</el-button>-->
      <!--<el-button type="primary"  plain size="mini">改费</el-button>-->
      <!--<el-button type="primary"  plain size="mini">删除</el-button>-->
      <el-button type="primary"  plain size="mini" @click="handlerRemark">备注说明</el-button>
      <el-button type="danger"  plain @click="handlerPreserve" size="medium" v-hasPermi="['payfee:tollCenter:roomCharge']">缴 费</el-button>
      <el-button type="danger"  plain @click="handlerPreserve('DY')" size="medium" v-hasPermi="['payfee:tollCenter:roomCharge']">缴费并打印</el-button>
    </div>

    <receivable-list ref="receivableRef" />

    <payment  ref="paymentRef" @ok="handlerPayment"/>

    <print-receipt ref="printReceiptRef" />


  </div>
</template>

<script>

import { selectAdueRecord,listRuleCost } from "@/api/payfee/ruleCost";
import ReceivableList from "./ReceivableList"
import { addReceipt } from "@/api/payfee/receipt";
import { detailMixin } from "./detailMixin.js"
import { favouredMixin } from "./favouredMixin.js"
import payment from "./payment"
import { getRoom ,listRoom } from "@/api/property/room";
import { singleCreateRoomCost,roomCharge,computePayfee } from "@/api/payfee/tollCenter";
import { listItem } from "@/api/payfee/item";
import { listAdvanceReceipt,getAdvanceMoney } from "@/api/payfee/advanceReceipt";
import { listPrintTemplet } from "@/api/system/printTemplet";
import { getReceipt} from "@/api/payfee/receipt";
import PrintReceipt from "@/views/payfee/tollCenter/printTemplate/printReceipt"

export default {
  name: "paymentDetail",
  components:{ReceivableList,payment,PrintReceipt},
  mixins: [ detailMixin , favouredMixin ],
  props: {
    pageParam: {
      type: Object,
      default:()=>{}
    },
  },
  data() {
    return {
      selectList:[],
      // 遮罩层
      loading: false,
      //应收费用列表
      receivableList:[],
      queryParams:{
        roomIds:null,
        ownerId:null
      },
      //关联房间
      assOpen:false,
      form:{

      },
      multipleSelection:[],
      //房间列表
      associateRoomList:[],
      //除去当前选中的房间列表
      notCurrentRoomList:[],
      //关联房间选中条目
      assSelection:[],
      //是否显示关联房间
      showAssBtn:true,
      //最小转存金额
      transferAmountMin:null,
      //押金
      foregift:0,
      itemOptions:[], //收费项目
      printTempletOptions:[]

    };
  },
  mounted() {
    this.setColSpan()
  },
  created() {
    this.getListPrintTemplet()
  },
  watch:{
    pageParam:{
      handler(oldv,newv){
       this.init()
      },
      deep:true
    }
  },
  methods: {
    // handleSelectionChange(v){
    //   console.log("选中",v)
    //   if(this.selectList.length > 0){
    //     this.selectList=[];
    //   }
    //   this.selectList=v;
    // },
    changePolicy(row){
      this.preferentialChange(row);
    },
    init(){
      if(this.pageParam.roomIds){
        this.getList();
        this.initFavoured();
        //费用列表
        this.getListItem()
        //重置表单
        this.reset()
      }else{
        this.receivableList = []
        this.listFavouredPolicyOptions = []
      }
    },
    /** 查询常规费用单列表 */
    getList() {
      this.loading = true;
      this.queryParams.roomIds = this.pageParam.roomIds
      selectAdueRecord(this.queryParams).then(response => {
        let receivableList = response.data;
        for(let i in receivableList){
          let row = receivableList[i]
          row.paymentMonth = row.finishTime
          // row.paymentCycle = row.finishTime || row.paymentCycle
        }
        this.receivableList = receivableList
        this.total = response.total;
        this.loading = false;
      });
    },
    getListItem(){
      listItem().then(res=>{
        this.itemOptions = res.rows;
      })
    },
    //打印模板字典
    getListPrintTemplet(){
      listPrintTemplet({templetType: '10',status:'0'}).then(res=>{
        this.printTempletOptions = res.rows
      })
    },
    //房屋预收金额
    roomAdvanceMoney(){
      getAdvanceMoney(this.pageParam.roomIds||"-1").then(res=>{
        this.advanceMoney = res.data
      })
    },
    ysxmHaveMoney(row){
      return -1*scope.row.haveMoney
    },
    // 表单重置
    reset() {
      this.multipleSelection = []
      this.form = {
        preferentialId: null,//优惠政策
        discount: null,//折扣
        billMoney: 0,//实收金额
        obtainMoney: 0,//收款金额发生变化之前的实收金额,用来做校验
        oddChangeMoney: 0,//找零金额
        transferAmount: 0,//转存金额
        billDate: this.parseTime(new Date()),//收款日期
        printTemplate: null,//打印模板
        amountAmount: 0,//冲抵金额
        receivableMoney: 0,//应收金额
        specialMoney:0,//优惠金额
        bzjFlag:'N',
        modePayments: [
          {
            collectionMethod: '10001',//收款方式
            billMoney: 0//收款金额
          }
        ]
      }
      this.resetForm("form");
    },
    disabledDate(time,row) {
      let beginTime= null;
      if(row.beginTime){
        //beginTime = this.getNextMonthDay(row.beginTime,-1);
        let date = new Date(row.beginTime);
        return time.getTime() <  date.getTime();
      }else if(row.deliveryTime){
        let date = new Date(row.deliveryTime);
        return time.getTime() <  date.getTime();
      }
      return false;
    },
    handleCostDetails(row){
      console.log("应收金额",row)
      this.$refs.receivableRef.show({bean:row,type:'',listFavouredPolicyOptions:this.listFavouredPolicyOptions})
    },
    //打开缴费窗口缴费
    handlerPreserve(type){
      // if(this.form.billMoney < 1){
      //   this.msgError("缴费金额必须大于0!")
      //   return;
      // }

      if(this.form.specialMoney && parseFloat(this.form.billMoney) < parseFloat(this.form.obtainMoney) ){
        this.msgError("参加优惠政策,收到金额必须大于等于实收金额!")
        return;
      }

      if(parseFloat(this.form.transferAmount) < 0){
        let money = parseFloat(this.form.billMoney) -parseFloat(this.form.transferAmount)
        if(money < parseFloat(this.form.obtainMoney)){
          this.msgError("(转存少缴金额+收到金额)不能小于实收金额!")
          return;
        }
      }
      if(this.multipleSelection.length == 1){
        let index = this.multipleSelection.findIndex(item=> item.projectId=='ysxm')
        if(index != -1){
          this.msgError("请先选择,需要交费的项目!")
          return;
        }
      }

      if(this.multipleSelection.length >0){

        if(type && type=='DY' && !this.form.printTemplate){
          this.msgError("请选择打印模板!")
          return;
        }

        this.$refs.paymentRef.show({
          billMoney:this.form.billMoney,//应收金额
          isPrint: type
        })
      }else{
        this.msgError("请先选择,需要交费的项目!")
      }
    },
    //缴费
    handlerPayment(paymentForm){
      let me = this
      this.form.modePayments = paymentForm.modePayments
      if(paymentForm.transferAmount > 0){
        this.form.transferAmount = paymentForm.transferAmount
        this.form.billMoney = paymentForm.receivableMoney
      }else{
        this.form.billMoney = paymentForm.billMoney
      }
      let param = this.receiptFactory()
      roomCharge(param).then(res=>{
        this.msgSuccess("新增收款单成功!");
        let printTemplate = this.form.printTemplate
        this.reset();
        this.$emit("handlerPayment")
        if(paymentForm.isPrint && paymentForm.isPrint=='DY'){
          getReceipt(res.msg).then(receipt=>{
            me.$refs.printReceiptRef.show({receiptData:receipt.data,printTemplate: printTemplate})
          })
        }
      })
    },
    //打印预览
    handlerPrint(){

    },
    //保存并打印
    handlerPreservePrint(){

    },
    //备注说明
    handlerRemark(){

    },
    //逐条创建费用单
    handlerPaymentMonth(v,scope){
      let row = scope.row;
      let form = {
        roomId:row.roomId,
        projectId:row.projectId,
        normId:row.normId,
        roomNormId:row.roomNormId,
        paymentCycle:v,
        ruleCostIds:row.ruleCostIds
      }
      let index = this.multipleSelection.findIndex(x=>x == this.receivableList[scope.$index])
      if(index != -1){
        this.$refs.table.toggleRowSelection( this.multipleSelection[index], false)
      }
      singleCreateRoomCost(form).then(res=>{
        let { code,adueRecord,maxTime } = res.data
        if(code == 200){
          this.receivableList[scope.$index].beginTime = adueRecord.beginTime
          this.receivableList[scope.$index].finishTime = adueRecord.finishTime
          this.receivableList[scope.$index].receivableMoney = adueRecord.receivableMoney
          this.receivableList[scope.$index].haveMoney = adueRecord.haveMoney
          this.receivableList[scope.$index].specialMoney = adueRecord.specialMoney
          this.receivableList[scope.$index].amountAmount = adueRecord.amountAmount
          this.receivableList[scope.$index].monthNum = adueRecord.monthNum
          this.receivableList[scope.$index].amountOwed = adueRecord.amountOwed
          this.receivableList[scope.$index].ruleCostList = adueRecord.ruleCostList
        }else if(code == 201){
          this.checkComputePayfee(row,`当前选择的缴费截至月[${this.$utils.toDateString(v,'yyyy-MM')}]大于最后一次生成费用的时间[${maxTime}],是否计算费用单到缴费截至月`,v)
        }else if(code == 202){
          this.checkComputePayfee(row,`未查询到欠费,是否计算费用单到缴费截至月`,v)
        }
      })
    },
    checkComputePayfee(row,msg,paymentCycle){
      let formData = {
        roomId: row.roomId,
        normId: row.normId,
        chargeId: row.chargeId,
        paymentCycle: paymentCycle,
        communityId:null
      };
      this.$confirm(msg, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return computePayfee(formData);
      }).then(() => {
        this.getList()
        this.msgSuccess("费用计费成功");
      }).catch(() => {
      });
    },
    //关联房间
    handlerGlfj(){
      getRoom(this.queryParams.roomIds).then(res=>{
        if(res.data.ownerId){
          listRoom({ownerId:res.data.ownerId,communityId:res.data.communityId}).then(res=>{
            if(res.rows.length > 1){
              this.associateRoomList = res.rows
              let notCurrentRoomList = [];
              for(let i in res.rows){
                if(res.rows[i].id != this.queryParams.roomIds){
                  notCurrentRoomList.push(res.rows[i])
                }
              }
              this.notCurrentRoomList = notCurrentRoomList
              this.assOpen = true
              this.$nextTick(() => {
                this.$refs.glfjTable.toggleAllSelection(); // 全选
              });
            }else{
              this.msgError(`业主【${res.data.roomName}】未关联其他房间。`)
            }
          })
        }else{
          this.msgError(`房间【${res.data.roomName}】未关联业主信息。`)
        }
      })
    },
    // 多选框选中数据
    assSelectionChange(selection) {
      this.assSelection = selection
    },
    //关联房间确认
    assConfirm(){
      this.assOpen = false
      for(let i in this.associateRoomList){
        if(this.associateRoomList[i].id == this.queryParams.roomIds){
          this.assSelection.push(this.associateRoomList[i])
        }
      }
      this.$emit("assConfirm",this.associateRoomList,this.assSelection)
    },
    hideAssBtn(){
      this.showAssBtn = false
    },
    openAssBtn(){
      this.showAssBtn = true
    },
    styleTitleFunc({row,column,rowIndex, columnIndex}){
      if(column.property=='paymentCycle'){
        return "color: red;"
      }
    },
    billMoneyChange(v){
      if(this.form.specialMoney && parseFloat(this.form.billMoney) < parseFloat(this.form.obtainMoney) ){
        this.msgError("参加优惠政策,收到金额必须大于等于实收金额!")
        this.form.billMoney = this.form.obtainMoney
        return;
      }
      //实收金额-应收金额
      let remainder = parseFloat(this.form.billMoney) - parseFloat(this.form.obtainMoney);
      if(remainder > 0){
        this.form.oddChangeMoney = remainder;
        this.form.transferAmount = 0
      }else if(remainder == 0){
        this.form.oddChangeMoney = 0;
        this.form.transferAmount = 0;
      }else{
        this.transferAmountMin = remainder;
        this.form.oddChangeMoney = 0;
        this.form.transferAmount = 0;
      }
    },
    oddChangeMoneyChange(v){
      if(!this.form.oddChangeMoney || this.form.oddChangeMoney < 0){
        let remainder = parseFloat(this.form.billMoney) - parseFloat(this.form.obtainMoney);
        //找零金额
        this.form.oddChangeMoney = remainder
        //转存金额
        this.form.transferAmount = 0
        this.msgError("找零金额不能小于零!")
        return;
      }
      //实收金额减去找零金额 = 实收金额
      let receivableMoney = parseFloat(this.form.billMoney) - parseFloat(this.form.oddChangeMoney)
      if(receivableMoney < this.form.obtainMoney){
        //(实收金额+找零)-应收金额
        let remainder = parseFloat(this.form.billMoney) - parseFloat(this.form.obtainMoney);
        //找零金额
        this.form.oddChangeMoney = remainder
        //转存金额
        this.form.transferAmount = 0
        this.msgError("实收金额+找零金额小于应收金额")
      }else{
        //转存金额 = 实收金额 - 应收金额
        this.form.transferAmount = receivableMoney -parseFloat(this.form.obtainMoney);

      }
    },
    transferAmountChange(v){
      if(parseFloat(v) < -10){
        this.msgError(`转存金额不能小于-10`)
        this.form.transferAmount = 0;
        return
      }

      //转存金额 + 实收金额
      let billMoney = parseFloat(this.form.transferAmount)+parseFloat(this.form.billMoney)
      if(billMoney > this.form.billMoney){
        if(this.transferAmountMin){
          this.msgError(`请输入0 ~ ${this.transferAmountMin}的金额!`)
        }
        this.form.transferAmount = 0;
        return;
      }
      if(v < this.transferAmountMin){
        this.msgError(`请输入0 ~ ${this.transferAmountMin}的金额!`)
        this.form.transferAmount = 0;
        return;
      }

      //实收金额减去 - 应收金额
      let money = parseFloat(this.form.billMoney) - parseFloat(this.form.obtainMoney);
      if(money > 0){
        if(v < 0){
          //找零金额
          this.form.oddChangeMoney = money
          //转存金额
          this.form.transferAmount = 0
          this.msgError("转存金额不能小于零!")
        }else{
          this.form.oddChangeMoney = money-v
        }
        return
      }else{
        //找零金额
        this.form.oddChangeMoney = 0
        // //转存金额
        // this.form.transferAmount = money
      }
    },
    //优惠设置
    handlerPreferential(){
        console.log(123456)
    },
    // 收费项目字典翻译
    itemFormat(row) {
      let index = this.itemOptions.findIndex(x=>x.chargeId == row.chargeId);
      if(index != -1){
        return this.itemOptions[index].chargeName
      }
      return '';
    },
    customInfoDetail(row){
      this.$router.push({path:'/waitress/customInfo/detail',query: {customId:row.ownerId}})
    }
  }
};
</script>
<style lang="scss" scoped>
  .submit-but{
    text-align: center;
    .link-but{
      margin-left: 10px;
    }
  }

  .operate-but{
    text-align: center;
  }
  ::v-deep .bottomForm{
    margin-top: 10px;
    .el-input__inner{
      border: none;
      border-bottom:1px solid #DCDFE6;
      border-radius: 0;
      padding: 0 5px;
    }
    .el-form-item--mini .el-form-item__label{
      padding: 3px !important;
    }
    .el-input-group__append, .el-input-group__prepend{
      border: none;
      background: none;
      font-weight: bold;
      font-size: 14px;
    }
  }

  ::v-deep .el-table__row{
    .el-input__inner{
      border: none;
      border-bottom: 1px solid #DCDFE6;
      border-radius: 0;
      padding: 0 5px;
    }
  }
  ::v-deep .topForm{
    .el-input__inner{
      border: none;
      border-bottom:1px solid #DCDFE6;
      border-radius: 0;
      padding: 0 5px;
    }
  }
</style>

<style lang="scss" >
  .uncon {
    .el-table {
      overflow: auto;
    }
    .el-table--scrollable-x .el-table__body-wrapper {
      overflow-x: visible;
    }
    .el-table__body-wrapper {
      overflow: visible;
    }
    .el-table__header-wrapper {
      overflow: visible;
    }
    .el-table__footer-wrapper {
      overflow: visible;
    }
    .el-table::after {
      position: relative !important;
    }
    .el-table--medium th, .el-table--medium td{
      padding: 0;
    }
    .special_money_class input{
      color: red !important;
      border-bottom-color: red !important;
    }
  }

  .favoured-main{
    color: red;
    max-height: 120px;
    overflow-y: auto;
    .favoured-title{
      font-size: 16px;
    }
    .favoured-content{
      font-size: 12px;
    }
  }
</style>
